<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<link href="css/boxstyle.css" rel="stylesheet">
		<style>
			.hz{
				width: 300px;
				height: 300px;
				border: 5px pink dotted;
				/* border-width: 10px;
				border-color: bisque;
				border-style: solid; */
				/* 复合写法border:大小 样式 颜色;(顺序不论) */
				/* solid实线,dotted点线,dashed虚线 */
				
				
				padding: 50px 40px 30px 20px;  /* 分别对应:上 右 下 左 顺时针方向 */
				/* padding: 50px 30px 10px;    分别对应：上  左右  下 */
				/* padding: 50px 20px;     分别对应：上下  左右 */
				/* padding: 50px;      分别对应:四个方位都是50px */
			}
			.box2{
				width: 200px;
				height: 200px;
				border: 1px solid plum;
				margin: auto;    /*盒子水平居中*/
			}
		</style>
	</head>
	<body>
		<!-- 
		盒子模型：
		内容content,
		内边距padding(边框与内容的距离，！！！它会把盒子撑大！！！),
		边框border,
		外边距margin (盒子与盒子之间的距离) -->
		<!-- 方位词：top上，bottom下，right右，left左，center居中 -->
		<!-- 外边距的应用：
		     1.可以让块级盒子水平居中--》第一 盒子要有宽度；第二 盒子左右外边距设置为auto(自动的)
			 
			 -->
		<div class="hz">hello box</div>
		<div class="box2">hello box2</div>
	</body>
</html>
